<template>
  <div id="app">
    <mu-appbar v-if="!isHomePage" :zDepth="0" :title="title === 'index' ? '' : ''" class="example-appbar"
               :class="{'nav-hide': !open}">
      <mu-icon-button @click="toggleNav" icon="menu" slot="left"/>

      <el-dropdown trigger="click" class="navdash" slot="right">
        <span style="color: white;"><img width="30" :src="weather.picture1"/>~<img width="30"
          :src="weather.picture2"/>{{weather.temperature}} {{weather.weather}}&nbsp;&nbsp;&nbsp;{{this.user.member_name}}</span>
        <!--<span style="color: white;" class="el-dropdown-link userinfo-inner"><img  :src="this.sysUserAvatar"/> {{sysUserName}}</span>-->
        <span style="color: white;" @click="open2 = !open2" v-show="this.base.operation_ok"> &nbsp;&nbsp;&nbsp;菜单<i
          class="el-icon-arrow-right"></i> </span>
        <mu-drawer :open.sync="open2" :docked="docked2" :right="position === 'right'">
          <mu-list>
            <mu-list-item button>
              <i class="el-icon-menu" style="size: 30px;"></i>菜单选项
            </mu-list-item>
            <mu-divider/>
            <mu-list-item button href="#/FileManager">
              <a style="color: black" class="el-icon-document">首页</a>
            </mu-list-item>
            <mu-divider/>
            <mu-list-item button href="#/Video_Surveillance">
              <a style="color: black" class="el-icon-view">视频列表</a>
            </mu-list-item>
            <mu-divider/>
            <mu-list-item button href="#/AlertList">
              <a style="color: black" class="el-icon-warning">告警列表</a>
            </mu-list-item>
            <mu-divider/>
            <mu-list-item button href="#/orgnization_set">
              <a style="color: black" class="el-icon-setting">部门添加设置</a>
            </mu-list-item>
            <mu-divider/>
            <mu-list-item button href="#/role_set">
              <a style="color: black" class="el-icon-setting">角色设置</a>
            </mu-list-item>
            <mu-divider/>
            <mu-list-item button href="#/member_role">
              <a style="color: black" class="el-icon-setting">人员角色设置</a>
            </mu-list-item>
            <mu-divider/>
            <mu-list-item button href="#/operation">
              <a style="color: black" class="el-icon-setting">权限设置</a>
            </mu-list-item>
            <mu-divider/>
            <mu-list-item button>
              <el-button @click="open2 = false" type="primary" icon="el-icon-close" size="small">关闭菜单</el-button>
            </mu-list-item>
          </mu-list>
        </mu-drawer>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>我的消息</el-dropdown-item>
          <el-dropdown-item divided @click.native="dialogFormVisible = true">设置</el-dropdown-item>
          <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <!--<mu-icon-button slot="right" icon=":mudocs-icon-custom-github"/>-->
    </mu-appbar>
    <app-nav v-if="!isHomePage" @change="handleMenuChange" @close="toggleNav" :open="open" :docked="docked"/>
    <div class="example-content" :class="{'nav-hide': !open, 'home-page': isHomePage}">
      <router-view></router-view>
    </div>
    <el-dialog title="用户信息修改" :visible.sync="dialogFormVisible" center>
      <el-form :model="ruleForm3" :rules="rules3" ref="ruleForm3" label-width="100px" class="demo-ruleForm">
        <el-form-item prop="member_name" label="账号">
          <el-input type="text" v-model="ruleForm3.member_name" auto-complete="off" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item prop="member_password" label="原始密码">
          <el-input type="password" v-model="ruleForm3.member_password" auto-complete="off"
                    placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item prop="member_password2" label="新密码">
          <el-input type="password" v-model="ruleForm3.member_password2" auto-complete="off"
                    placeholder="请输入新密码"></el-input>
        </el-form-item>
        <el-form-item prop="member_password3" label="确认新密码">
          <el-input type="password" v-model="ruleForm3.member_password3" auto-complete="off"
                    placeholder="请输入确认新密码"></el-input>
        </el-form-item>
        <el-form-item prop="mobile" label="电话">
          <el-input type="text" v-model="ruleForm3.mobile" auto-complete="off" placeholder="请输入电话"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-select v-model="ruleForm3.organization_id" placeholder="请选择部门" auto-complete="off">
            <el-option :label="item.label" :value="item.id" :key="item.id" v-for="item in orgdata"></el-option>
            <!--<el-option label="管理员" value="42f665ae96f04899a20bdb9cf06c1d65"></el-option>-->
          </el-select>
        </el-form-item>
        <el-form-item prop="member_comments" label="备注">
          <el-input type="textarea" v-model="ruleForm3.member_comments" auto-complete="off"
                    placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click.native.prevent="handleSubmit3" :loading="logining">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import AppNavDrawer from './components/AppNavDrawer'
  import {getcookieOperate} from './api/base';
  import {getORGlist, updateuserInfo, requestWeather} from './api/api';

  export default {
    data() {
      const desktop = isDesktop()
      return {
        name: this.$route.query.name,
        user: {},
        open: desktop,
        docked: desktop,
        desktop: desktop,
        docked2: true,
        open2: false,
        position: 'right',
        title: '',
        sysUserName: '',
        sysUserAvatar: '',
        logining: false,
        dialogFormVisible: false,
        ruleForm3: {
          member_name: '',
          member_password: '',
          member_password2: '',
          mobile: '',
          member_comments: '',
          organization_id: '',
          member_password3: ''
        },
        rules3: {
          member_name: [
            {required: true, message: '请输入账号', trigger: 'blur'},
            //{ validator: validaePass }
          ],
          member_password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            //{ validator: validaePass2 }
          ],
          member_password2: [
            {required: true, message: '请输入新密码', trigger: 'blur'},
            //{ validator: validaePass2 }
          ],
          member_password3: [
            {required: true, message: '请输入确认新密码', trigger: 'blur'},
            //{ validator: validaePass2 }
          ],
          mobile: [
            {required: true, message: '请输入电话,不能大于11位', max: 11, trigger: 'blur'},
            //{ validator: validaePass2 }
          ],
          member_comments: [
            {required: true, message: '请输入备注', trigger: 'blur'},
            //{ validator: validaePass2 }
          ],
          organization_id: [
            {required: true, message: '请选择部门', trigger: 'blur'},
            //{ validator: validaePass2 }
          ]
        },
        orgdata: [],
        weather: {}
//      operation_ok:false
      }
    },
    computed: {
      isHomePage() {
        return this.$route.fullPath === '/Login'
      }
    },
    created() {
      this.base.setPermission();
    },
    mounted() {
      this.routes = this.$router.options.routes
      this.setTitle()
      this.changeNav()
      this.handleResize = () => {
        this.changeNav()
      }
      window.addEventListener('resize', this.handleResize)
      window.addEventListener('hashchange', () => {
        this.setTitle()
      })

      var user = sessionStorage.getItem('user');
      if (user) {
        user = JSON.parse(user);
        this.user = user;
        this.sysUserName = user.member_name || '';
//        this.sysUserAvatar = user.third_name || '';
        this.ruleForm3.video_member_id = user.video_member_id;
        this.ruleForm3.member_name = user.member_name;
//        this.ruleForm3.member_password=user.member_password;
        this.ruleForm3.mobile = user.mobile;
        this.ruleForm3.member_comments = user.member_comments;
        this.ruleForm3.organization_id = user.organization_id;
      }
      this.initDatesousre();
//      this.operation_ok=this.base.operation_ok;
    },
    methods: {
      toggleNav() {
        this.open = !this.open
      },
      changeNav() {
        const desktop = isDesktop()
        this.docked = desktop
        if (desktop === this.desktop) return
        if (!desktop && this.desktop && this.open) {
          this.open = false
        }
        if (desktop && !this.desktop && !this.open) {
          this.open = true
        }
        this.desktop = desktop
      },
      handleMenuChange(path) {
        if (!this.desktop) this.open = false
      },
      setTitle() {
        let path = window.location.hash
        if (path && path.length > 1) path = path.substring(1)
        for (let i = 0; i < this.routes.length; i++) {
          var route = this.routes[i]
          if (route.path === path) {
            this.title = path.substring(1) || ''
            return
          }
        }
      },
      //退出登录
      logout: function () {
        var _this = this;
        this.$confirm('确认退出吗?', '提示', {
          //type: 'warning'
        }).then(() => {
          sessionStorage.removeItem('user');
          _this.$router.push('/login');
        }).catch(() => {

        });
      },
      initDatesousre() {
        var _this = this;
        var loginParams = {};
        var jsonstr = JSON.stringify(loginParams);
        getORGlist(jsonstr)
          .then(responsedata => {
            _this.logining = false;
            //NProgress.done();
            let {status, data} = responsedata;
            if (status !== 200) {
              this.$message({
                message: '请求失败',
                type: 'error'
              });
            } else {
              var orgList = data.values;
              _this.orgdata = orgList;
            }
          })
          .catch(function (response) {
            _this.logining = false;
            _this.$notify.error({
              title: '错误',
              message: '网络请求失败'
            });
            console.log(response);
          });

        requestWeather('')
          .then(responsedata => {
            _this.logining = false;
            //NProgress.done();
            let {status, data} = responsedata;
            if (status !== 200) {
              _this.$message({
                message: '请求失败',
                type: 'error'
              });
            } else {
              _this.weather = data.values[0];
              this.weather.picture1 = './static/weather/a_' + _this.weather.picture1;
              this.weather.picture2 = './static/weather/a_' + _this.weather.picture2;
            }
          })
          .catch(function (response) {
            _this.logining = false;
            _this.$notify.error({
              title: '错误',
              message: '天气获取失败'
            });
            console.log(response);
          });
      },
      handleSubmit3(ev) {
        var _this = this;
        this.$refs.ruleForm3.validate((valid) => {
          if (valid) {
            if (_this.ruleForm3.member_password != _this.user.member_password) {
              return this.$message({
                type: 'error',
                message: '原始密码错误'
              });
            }
            if (_this.ruleForm3.member_password2 != _this.ruleForm3.member_password3) {
              return this.$message({
                type: 'error',
                message: '密码不一致'
              });
            }
            this.logining = true;
            var updateParams = {
              video_member_id: _this.ruleForm3.video_member_id,
              member_name: _this.ruleForm3.member_name,
              member_password: _this.ruleForm3.member_password2,
              member_comments: _this.ruleForm3.member_comments,
              mobile: _this.ruleForm3.mobile,
              organization_id: _this.ruleForm3.organization_id
            };
            updateuserInfo(updateParams)
              .then(responsedata => {
                _this.logining = false;
                //NProgress.done();
                let {status, data} = responsedata;
                if (status !== 200) {
                  this.$message({
                    message: '请求失败',
                    type: 'error'
                  });
                } else {
                  var descritpion = data.descritpion;
                  if (data.status == '90000') {
                    var user = sessionStorage.getItem('user');
                    user = JSON.parse(user);
                    user.member_name = _this.ruleForm3.member_name;
                    user.member_password = _this.ruleForm3.member_password2;
                    user.member_comments = _this.ruleForm3.member_comments;
                    user.mobile = _this.ruleForm3.mobile;
                    user.organization_id = _this.ruleForm3.organization_id;
                    sessionStorage.setItem('user', JSON.stringify(user));
                    this.$message({
                      type: 'success',
                      message: '提交成功'
                    });
                  } else {
                    this.$message({
                      type: 'error',
                      message: descritpion
                    });
                  }
                  this.dialogFormVisible = false;

                }
              })
              .catch(function (response) {
                _this.logining = false;
                _this.$notify.error({
                  title: '错误',
                  message: '网络请求失败'
                });
                console.log(response);
              });

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    },
    destroyed() {
      window.removeEventListener('resize', this.handleResize)
    },
    components: {
      'app-nav': AppNavDrawer
    }
  }

  function isDesktop() {
    return window.innerWidth > 993
  }
</script>


<style scoped lang="less">
  @import "../src/styles/import.less";

  .example-appbar {
    position: fixed;
    left: 256px;
    right: 0;
    top: 0;
    width: auto;
    transition: all .45s @easeOutFunction;
    &.nav-hide {
      left: 0;
    }
  }

  .example-content {
    padding-top: 56px;
    padding-left: 256px;
    transition: all .45s @easeOutFunction;
    &.nav-hide {
      padding-left: 0;
    }
  }

  .content-wrapper {
    padding: 48px 72px;
  }

  @media (min-width: 480px) {
    .example-content {
      padding-top: 64px;
    }
  }

  @media (max-width: 993px) {
    .example-appbar {
      left: 0;
    }

    .example-content {
      padding-left: 0;
    }

    .content-wrapper {
      padding: 24px 36px;
    }
  }

  .home-page {
    padding: 0;
    .example-content {
      transition-duration: 0s;
    }
  }

  .header {
    /*height: 60px;*/
    /*line-height: 60px;*/
    /*background:#20a0ff;*/
    /*color:#fff;*/
    .userinfo {
      text-align: right;
      padding-right: 35px;
      float: right;
      .userinfo-inner {
        cursor: pointer;
        color: #FFFFFF;
        img {
          width: 40px;
          height: 40px;
          border-radius: 20px;
          margin: 10px 0px 10px 10px;
          float: right;
        }
      }
    }
    .logo {
      //width:230px;
      height: 60px;
      font-size: 22px;
      padding-left: 20px;
      padding-right: 20px;
      border-color: rgba(238, 241, 146, 0.3);
      border-right-width: 1px;
      border-right-style: solid;
      img {
        width: 40px;
        float: left;
        margin: 10px 10px 10px 18px;
      }
      .txt {
        color: #fff;
      }
    }
    .logo-width {
      width: 230px;
    }
    .logo-collapse-width {
      width: 60px
    }
    .tools {
      padding: 0px 23px;
      width: 14px;
      height: 60px;
      line-height: 60px;
      cursor: pointer;
    }
  }
</style>
